<template>
  <div class="popular">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in songSheet.songSheetList"
        :key="item.id"
        :label="item.name"
        :name="item.name"
      >
        <div class="popular-content">
          <div class="song">
            <song-list></song-list>
          </div>
          <div class="song-sheet">
            <div
              class="song-sheet-box"
              v-for="item in songSheet.topPlayList"
              :key="item.id"
              @click="handleSong(item.id)"
            >
              <div
                class="song-sheet-detail"
                :class="{ 'song-sheet-detail-active': item.id === activeCard }"
              >
                {{ item.name }}
              </div>
              <div class="song-sheet-playCount">
                <el-icon><Headset /></el-icon>
                {{ formartMyriad(item.playCount) }}
                /
                {{ item.trackCount + "首" }}
              </div>
              <el-image
                class="song-sheet-img"
                :src="item.coverImgUrl"
              ></el-image>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import SongList from "@/components/songList/SongList.vue";
import { onMounted, reactive, ref } from "vue";
import type { TabsPaneContext } from "element-plus";
import { hotSongSheet, topPlaySong, topPlaySongDetail } from "@/api/api";
import { TopPlayType, songListType } from "@/types/apiType";
import { useStore } from "vuex";
import { formartMyriad, formatSong } from "@/utils/utils";
/**
 * ---------类型定义---------
 */

interface songSheetItem {
  id: number;
  name: string;
  coverImgUrl: string;
  playCount: number;
  trackCount: number;
}

interface songSheet {
  songSheetList: Array<songSheetItem>;
  topPlayList: Array<songSheetItem>;
}
/**
 * ---------变量定义---------
 */
const activeName = ref<String>("热门推荐");
const activeCard = ref<number>();
const songSheet = reactive<songSheet>({
  songSheetList: [],
  topPlayList: [],
});
const params: TopPlayType = reactive({
  order: "hot",
  cat: "",
  limit: "6",
  offset: 50,
});
const store = useStore();
/**
 * ---------方法---------
 */
const handleClick = (tab: TabsPaneContext) => {
  params.cat = tab.props.name;
  getTopPlay();
};
const handleSong = (id: number) => {
  activeCard.value = id;
  getSongDetail(id);
};

/**
 * ---------接口---------
 */
const getHotSongSheet = async () => {
  const { tags } = await hotSongSheet();
  tags.unshift({ name: "热门推荐" });
  songSheet.songSheetList = tags.splice(0, 6);
};
const getTopPlay = async () => {
  const { playlists } = await topPlaySong(params);
  songSheet.topPlayList = playlists;
  activeCard.value = playlists[0].id;
  getSongDetail(playlists[0].id);
};
const getSongDetail = async (id: number) => {
  const ids = { id };
  const { playlist } = await topPlaySongDetail(ids);
  playlist.tracks = playlist.tracks.map((item: any) => formatSong(item));
  store.commit("setPlayList", playlist.tracks);
};
onMounted(() => {
  getHotSongSheet();
  getTopPlay();
});
</script>

<style lang="scss" scoped>
.popular {
  .popular-content {
    display: flex;
    .song {
      width: 55%;
    }
    .song-sheet {
      flex: 1;
      height: 400px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
      margin-left: 16px;
      .song-sheet-box {
        position: relative;
        font-size: 12px;
        font-weight: 500;
        color: white;
        cursor: pointer;
        margin: 10px 10px;
        .song-sheet-detail {
          position: absolute;
          box-sizing: border-box;
          z-index: 1;
          bottom: 43px;
          height: 52px;
          background: rgba(0, 0, 0, 0.16);
          backdrop-filter: blur(8px);
          width: 100%;
          border-radius: 0px 0px 10px 10px;
          padding: 5px 5px;
        }
        .song-sheet-detail:hover {
          background: #105def69;
        }
        .song-sheet-detail-active {
          background: #105def69;
        }
        .song-sheet-playCount {
          position: absolute;
          box-sizing: border-box;
          z-index: 1;
          right: 0;
          top: 0;
          line-height: 12px;
          height: 22px;
          background: rgba(0, 0, 0, 0.16);
          backdrop-filter: blur(8px);
          padding: 5px 5px;
        }
      }
      .song-sheet-img {
        width: 160px;
        height: 160px;
        border-radius: 12px;
        margin-bottom: 40px;
      }
    }
  }
}
</style>
